<template>
  <div class="categories-page">
    <!-- 分类列表 -->
    <div class="categories-container">
      <CategoryList
        :categories="categoriesList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 分类列表页面
 * 展示所有工具分类，支持点击查看分类下的工具
 */
import type { ToolTab } from '~/types/tools'

// 
const categoriesList = ref<ToolTab[]>([])
// 获取分类数据
const { success, data: categoriesData } = await $fetch('/api/categories?excludeIds=1,2', {
  method: 'GET'
})

if (success && categoriesData) {
  categoriesList.value = categoriesData
}

/**
 * 设置页面SEO信息
 */
useHead({
  title: '工具分类 - AI工具导航',
  meta: [
    {
      name: 'description',
      content: '探索各种AI工具分类，包括AI写作、AI图像、AI音频、AI视频、AI编程等，找到您需要的AI工具'
    },
    {
      property: 'og:title',
      content: '工具分类 - AI工具导航'
    },
    {
      property: 'og:description',
      content: '探索各种AI工具分类，找到您需要的AI工具'
    }
  ]
})

/**
 * 共享页面标题到全局状态
 */
const pageTitle = useState('pageTitle', () => '工具分类')
const pageDescription = useState('pageDescription', () => '探索各种AI工具分类，找到您需要的工具')

// 更新全局状态
pageTitle.value = '工具分类'
pageDescription.value = '探索各种AI工具分类，找到您需要的工具'
</script>

<style lang="less" scoped>
.categories-page {
  padding: 24px 0;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 20px;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.categories-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .categories-page {
    padding: 15px 0;
  }
  
  .page-header {
    margin-bottom: 32px;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .categories-container {
    padding: 0 15px;
  }
}

@media (min-width: 1024px) {
  .page-title {
    font-size: 42px;
  }
}
</style>